<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中国铁路12306</title>
    <link rel="stylesheet" href="./lib/reset/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>

    <!-- 1.顶部导航 -->
    <div class="topnav">
        <!-- 1.1版心 -->
        <div class="container clearfix">
            <!-- 1.1.1 logo -->
            <div class="topnav-logo">
                <img src="./img/logo.png" alt="">
            </div>
            <!-- 1.1.2搜索框 -->
            <div class="topnav-search clearfix">
                <div class="topnav-search-input">
                    <input type="text" placeholder="搜索车票/餐饮/常旅客/相关规章">
                    <i class="iconfont">&#xe61e;</i>
                </div>
            </div>

            <!-- 1.1.3右边登录 -->
            <div class="topnav-right">
                <div class="wenzi">
                    <a href="./login.html">
                        <span>我的12306</span>
                    </a>

                </div>
                <div class="font">
                    <i class="iconfont">&#xe642;</i>
                </div>
                <div class="font2">
                    <i class="iconfont">&#xe605;</i>
                </div>
                <div class="zui">
                    <a href="./login.html">
                        <span>登录</span>
                    </a>
                    <a href="./zhuce.html">
                        <span>注册</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 2.头部 -->
    <div class="header">
        <div class="container clearfix">
            <div class="first">
                <span>首页</span>
            </div>

            <div class="gege">
                <span>车票</span>
                <i class="iconfont">&#xe635;</i>
            </div>

            <div class="gege">
                <span>团购服务</span>
                <i class="iconfont">&#xe635;</i>
            </div>

            <div class="gege">
                <span>会员服务</span>
                <i class="iconfont">&#xe635;</i>
            </div>

            <div class="gege">
                <span>站车服务</span>
                <i class="iconfont">&#xe635;</i>
            </div>

            <div class="gege">
                <span>商旅服务</span>
                <i class="iconfont">&#xe635;</i>
            </div>

            <div class="gege">
                <span>出行服务</span>
                <i class="iconfont">&#xe635;</i>
            </div>

            <div class="gege">
                <span>信息查询</span>
                <i class="iconfont">&#xe635;</i>
            </div>
        </div>

    </div>

    <!-- 3.轮播图 -->
    <div class="banner">
        <div class="photo">
            <img src="./upload/banner08.jpg" alt="">
        </div>
        <div class="container clearfix">
            <div class="banner-middle">
                <div class="banner-middle-left">
                    <div class="small">
                        <a href="">
                            <i class="iconfont">&#xe770;</i>
                            <span>车票</span>
                        </a>
                    </div>
                    <div class="small1">
                        <a href="">
                            <i class="iconfont">&#xe620;</i>
                            <span>常用查询</span>
                        </a>
                    </div>
                    <div class="small2">
                        <a href="">
                            <i class="iconfont">&#xe67c;</i>
                            <span>订餐</span>
                        </a>
                    </div>
                </div>
                <div class="banner-middle-right clearfix">
                    <div class="banner-middle-right-top">
                        <div class="right">
                            <a href="">
                                <i class="iconfont">&#xe94c;</i>
                                <span>单程</span>
                            </a>
                        </div>
                        <div class="right1">
                            <a href="">
                                <i class="iconfont">&#xe8da;</i>
                                <span>往返</span>
                            </a>
                        </div>
                        <div class="right1">
                            <a href="">
                                <i class="iconfont">&#xe634;</i>
                                <span>连续换乘</span>
                            </a>
                        </div>
                        <div class="right2">
                            <a href="">
                                <i class="iconfont">&#xe645;</i>
                                <span>退改签</span>
                            </a>
                        </div>
                    </div>



                    <div class="banner-middle-right-bottom clearfix">
                        <div class="bottom">
                            <span>出发地</span>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i class="iconfont">&#xe618;</i>
                        </div>

                        <div class="bottom">
                            <span>到达地</span>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i class="iconfont">&#xe618;</i>
                        </div>

                        <div class="change">
                            <i class="iconfont">&#xe8da;
                            </i>
                        </div>
                        <div class="bottom1">
                            <span>出发日期</span>
                            <input type="text" placeholder="2019-12-02">
                            <i class="iconfont">&#xe72a;</i>
                        </div>
                    </div>

                    <div class="text">
                        学生<input type="checkbox">
                        高铁/动车<input type="checkbox">
                    </div>

                    <div class="search-button">
                        <a href="">
                            <span> 查</span>
                            <span>询</span>
                        </a>
                    </div>

                    <div class="banner-middle-footer clearfix">
                        <div class="banner-middle-footer-left">
                            <i class="iconfont">&#xe62e;</i>
                            <a href="">
                                <span>沭阳-郑州</span>
                            </a>
                        </div>
                        <div class="banner-middle-footer-right">
                            <i class="iconfont">&#xe644;</i>
                            <a href="">
                                <span>删除历史</span>
                            </a>
                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>

    <!-- 4.菜单 -->
    <div class="menu ">
        <div class="container clearfix">
            <div class="each">
                <a href="./login.html">
                    <i class="iconfont">&#xe606;</i>
                    <span>重点旅客预约</span>
                </a>
            </div>
            <div class="each">
                <a href="./login.html">
                    <i class="iconfont">&#xe61c;</i>
                    <span>遗失物品查找</span>
                </a>
            </div>
            <div class="each">
                <a href="./car.html">
                    <i class="iconfont">&#xe770;</i>
                    <span>共享汽车</span>
                </a>
            </div>
            <div class="each">
                <a href="./bianmintuoyun.html">
                    <i class="iconfont">&#xe603;</i>
                    <span>便民托运</span>
                </a>
            </div>
            <div class="each">
                <a href="./station.html">
                    <i class="iconfont">&#xe6f4;</i>
                    <span>车站引导</span>
                </a>
            </div>
            <div class="each">
                <a href="./station.html">
                    <i class="iconfont">&#xe621;</i>
                    <span>站车风采</span>
                </a>
            </div>
            <div class="each">
                <a href="">
                    <i class="iconfont">&#xe627;</i>
                    <span>用户反馈</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 5.图片 -->
    <div class="photo1">
        <div class="container clearfix">
            <div>
                <a href="">
                    <img src="./img/01.png" alt="">
                </a>

                <a href="">
                    <img src="./img/02.png" alt="">
                </a>

                <a href="">
                    <img src="./img/03.png" alt="">
                </a>

                <a href="">
                    <img src="./img/04.png" alt="">
                </a>
            </div>
        </div>
    </div>

    <!-- 6.展示 -->
    <div class="show">
        <div class="container">
            <div class="show-top">
                <div class="show-top-left">
                    <h2>铁路旅游</h2>
                </div>
                <div class="show-top-right">
                    <span>更多&gt;</span>
                </div>
            </div>
            <div class="show-bottom clearfix">
                <div class="show-bottom-small">
                    <a href="">
                        <img src="./upload/01.png" alt="">
                        <p>"环西部火车游"高品质旅游版专线列车</p>
                        <span>￥2560</span>
                    </a>
                </div>
                <div class="show-bottom-small">
                    <a href="">
                        <img src="./upload/02.png" alt="">
                        <p>"环西部火车游"陇上江南行摄山>水陇南三日游</p>
                        <span>￥930</span>
                    </a>
                </div>
                <div class="show-bottom-small">
                    <a href="./trip.html">
                        <img src="./upload/03.png" alt="">
                        <p>"环西部火车游"华夏寻根 人文始祖天山水两日游</p>
                        <span>￥980</span>
                    </a>
                </div>
                <div class="show-bottom-small">
                    <a href="">
                        <img src="./upload/04.png" alt="">
                        <p>"环西部火车游"精品旅游线路</p>
                        <span>￥3380</span>
                    </a>
                </div>
                <div class="show-bottom-small">
                    <a href="">
                        <img src="./upload/05.png" alt="">
                        <p>"环西部火车游"美丽甘南三日游</p>
                        <span>￥880</span>
                    </a>
                </div>
                <div class="show-bottom-small">
                    <a href="">
                        <img src="./upload/06.png" alt="">
                        <p>"环西部火车游"青海湖、茶卡2日游</p>
                        <span>￥880</span>
                    </a>
                </div>
                <div class="show-bottom-small">
                    <a href="">
                        <img src="./upload/07.png" alt="">
                        <p>"环西部火车游"嘉敦5日游</p>
                        <span>￥2260</span>
                    </a>
                </div>
                <div class="show-bottom-small">
                    <a href="">
                        <img src="./upload/08.png" alt="">
                        <p>"环西部火车游"敦煌一地三日游</p>
                        <span>￥1380</span>
                    </a>
                </div>
            </div>

        </div>
    </div>

    <!-- 7.售后 -->
    <div class="sale">
        <div class="container clearfix">
            <div class="sale-top">
                <div class="one">
                    <a href="">
                        <span>最新发布</span>
                    </a>
                </div>
                <div class="two">
                    <a href="">
                        <span>常见问题</span>
                    </a>
                </div>
                <div class="two">
                    <a href="">
                        <span>信用信息</span>
                    </a>
                </div>
            </div>
            <div class="sale-bottom">
                <div class="one">
                    <ul>
                        <a href="">
                            <li>
                                <p> 候补购票操作说明</p>
                                <span>2019-10-12</span>
                            </li>

                        </a>
                        <a href="">
                            <li>
                                <p> 关于调整互联网、电话订票起售时间的公告</p>
                                <span>2019-11-29</span>
                            </li>

                        </a>
                        <a href="">
                            <li>
                                <p>中国铁路成都局集团有限公司关于恢复开行部分列车的公告</p>
                                <span>2019-11-30</span>
                            </li>

                        </a>
                        <a href="">
                            <li>
                                <p>中国铁路广州局集团有限公司关于2019年12月3日至12月29日部分旅客列车临时调整运行方案的公告</p>
                                <span>2019-11-30</span>
                            </li>

                        </a>

                        <a href="">
                            <li>
                                <p>中国铁路广州局集团有限公司关于2019年12月29日、12月30日部分旅客列车临时停运的公告</p>
                                <span>2019-11-30</span>
                            </li>

                        </a>
                    </ul>
                </div>
                <div class="two">
                    <ul>
                        <a href="">
                            <li>
                                <p>公告</p>
                                <span>2018-11-03</span>
                            </li>

                        </a>
                        <a href="">
                            <li>
                                <p>中国铁路成都局集团有限公司关于12月4至29日加开部分列车的公告</p>
                                <span>2019-11-30</span>
                            </li>

                        </a>
                        <a href="">
                            <li>
                                <p>中国铁路南宁局集团有限公司关于恢复开行部分列车的公告</p>
                                <span>2019-11-30</span>
                            </li>

                        </a>
                        <a href="">
                            <li>
                                <p>中国铁路广州局集团有限公司关于2019年12月3日至12月29日部分旅客列车临时调整运行方案的公告</p>
                                <span>2019-11-30</span>
                            </li>

                        </a>
                        <a href="">
                            <li>
                                <p>中国铁路广州局集团有限公司关于2019年12月29日、12月30日部分旅客列车临时停运的公告</p>
                                <span>2019-11-30</span>
                            </li>

                        </a>
                        <a href="">
                            <!-- <p>&nbsp;</p> -->
                            <span>更多&gt;</span>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 8.底部 -->
    <div class="footer">
        <div class="container clearfix">
            <div class="footer-left">
                <div class="footer-left-top">
                    <h2>友情链接</h2>
                </div>
                <div class="footer-left-bottom">
                    <a href="">
                        <img src="./upload/01 (2).png" alt="">
                    </a>
                    <a href="">
                        <img src="./upload/02(2).png" alt="">
                    </a>
                    <a href="">
                        <img src="./upload/03(2).png" alt="">

                    </a>
                    <a href="">
                        <img src="./upload/04(2).png" alt="">
                    </a>
                </div>
            </div>
            <div class="footer-right">
                <div class="footer-right-top">
                    <span class="one">中国铁路官方微信</span>
                    <span class="two">中国铁路官方微博</span>
                    <span class="three">12306公众号</span>
                    <span class="four">铁路12306</span>
                </div>
                <div class="footer-right-bottom">
                    <img src="./img/erweima01.png" alt="" class="one">
                    <img src="./img/erweima02.png" alt="" class="two">
                    <img src="./img/erweima03.png" alt="" class="three">
                    <img src="./img/erweima04.png" alt="" class="four">
                </div>
                <div class="zui">
                    <p>官方APP下载，目前铁路未授权
                        其他网站或APP开展类似服务内
                        容，敬请广大用户注意。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 9.底部商标 -->
    <div class="brand">
        <div class="container">
            <div class="middle">
                <p>版权所有©2008-2019 中国铁道科学研究院集团有限公司</p>
                <span>京ICP备05020493号-4 | 京ICP证150437号</span>
            </div>

        </div>
    </div>


</body>

</html>